<template>
  <div v-cloak>
    <Meta v-if="dataset.subject!==undefined" pagealias="preachshow" :custom_data="{subject:dataset.subject}" />
    <Head>宣讲会详情</Head>
    <div class="detail_meeting_bg">
      <div class="detail_meeting_info">
        <van-skeleton title :row="5" :loading="loading">
          <div class="meeting_info">
            <a class="share" href="javascript:;" @click="isShow=true">
              <img src="../../../assets/images/campus/detail_share.png" alt="" >
            </a>
            <p class="meeting_name substring2">{{dataset.subject}}</p>
            <p class="meeting_text_1 substring">{{dataset.starttime | timeFilter}}</p>
            <p class="meeting_text_2 substring">{{dataset.school_name}}</p>
            <p class="meeting_text_3 substring">{{dataset.address}}</p>
            <p class="meeting_text_4 substring">{{dataset.school_tel}}</p>
          </div>
        </van-skeleton>
        <div class="detail_info">
          <div class="detail_title">宣讲会描述</div>
          <div class="detail_info_text editor-content-view">
            <div v-html="dataset.introduction"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="alw_layer" v-show="isShow" @click="isShow=false"></div>
  </div>
</template>
<script>
import {parseTime} from '@/utils/index'
import api from '@/api.js'
import http from '@/utils/http.js'
export default{
  beforeMount () {
    // 自定义body背景色
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f4f7fc')
  },
  beforeDestroy () {
    // 去掉自定义body背景色
    document.querySelector('body').removeAttribute('style')
  },
  data () {
    return {
      isShow: false,
      career_talk_id: '',
      loading: true,
      dataset: {}
    }
  },
  filters: {
    timeFilter (timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d}')
    }
  },
  mounted () {
    this.career_talk_id = this.$route.params.id
    this.fetchData()
  },
  methods: {
    fetchData () {
      http.get(api.preach_show, {
        id: this.career_talk_id
      }).then((res) => {
        this.dataset = res.data.info
        if (this.dataset) {
          this.loading = false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.van-skeleton{
  padding: 20px 0;
}
.public_head{
  background: #fff;
}
.detail_meeting_bg{
  background-image: linear-gradient(#f9fafc,#f4f7fc);
  padding-bottom: 17px;
  padding-top: 20px;
}
.detail_meeting_info {
  margin: 0 8.5px 0 10px;
}
.detail_meeting_info .meeting_info {
  box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  height: 230px;
  padding: 27.5px 46.5px 0 15px;
  background: url(../../../assets/images/campus/meeting_info_bg.png) no-repeat right bottom/106.5px 114px #fff;
  position: relative;
  margin-bottom: 23.5px;
}

.detail_meeting_info .meeting_info .share {
  width: 16px;
  height: 14.5px;
  position: absolute;
  right: 11px;
  top: 10.5px;
  font-size: 0;
}
.detail_meeting_info .meeting_info .share img{
  width: 16px;
  height: 14.5px;
}

.detail_meeting_info .meeting_info .meeting_name {
  color: #033333;
  font-size: 18px;
  margin-bottom: 24px;
}

.detail_meeting_info .meeting_info .meeting_text_1,
.detail_meeting_info .meeting_info .meeting_text_2,
.detail_meeting_info .meeting_info .meeting_text_3,
.detail_meeting_info .meeting_info .meeting_text_4 {
  color: #666666;
  font-size: 15px;
  padding-left: 21px;
}

.detail_meeting_info .meeting_info .meeting_text_1 {
  background: url(../../../assets/images/campus/detail_1.png) no-repeat left center/12.5px 12.5px;
}

.detail_meeting_info .meeting_info .meeting_text_2 {
  margin: 11px 0;
  background: url(../../../assets/images/campus/detail_2.png) no-repeat left center/12.5px 14.5px;
}
.detail_meeting_info .meeting_info .meeting_text_3 {
  background: url(../../../assets/images/campus/detail_3.png) no-repeat left center/13px 13.5px;
}

.detail_meeting_info .meeting_info .meeting_text_4 {
  background: url(../../../assets/images/campus/detail_4.png) no-repeat left center/13px 13.5px;
  margin-top: 12px;
}
.detail_info{
  min-height: 350px;
}

.detail_info .detail_title{
  color:#444444 ;
  font-size: 18px;
  position: relative;
  padding-left: 14.5px;
  margin-bottom: 17.5px;
}

.detail_info .detail_title::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: linear-gradient(to right,#02d088,#06dbb0);
  border-radius: 5px;
}

.detail_info .detail_info_text{
  background-color: #fff;
  border-radius: 5px;
  padding: 25px 17px  17px;
  font-size: 14px;
  word-break: break-word;
}

.alw_layer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 9999;
  background: url(../../../assets/images/campus/wzp_layer.png) no-repeat center center /320px 122px rgba(0,0,0,.8);
}

</style>
